{% extends 'base/base1.html' %}

{% block title %}修改信息{% endblock %}

{% block css %}
<style>
.form-container {
    max-width: 600px;
    margin: 40px auto;
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.form-title {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 30px;
    font-weight: 700;
    font-size: 2rem;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: 600;
    font-size: 14px;
}

.form-group input, .form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus, .form-group select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.avatar-section {
    text-align: center;
    margin-bottom: 30px;
}

.current-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #e9ecef;
    object-fit: cover;
    margin-bottom: 15px;
}

.file-upload-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s ease;
}

.file-upload-wrapper:hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.file-upload-wrapper input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.upload-text {
    color: #6c757d;
    font-size: 14px;
}

.btn-submit {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-back {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 20px;
    background: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.btn-back:hover {
    background: #5a6268;
    text-decoration: none;
    color: white;
    transform: translateY(-2px);
}

.alert {
    background: #f8d7da;
    color: #721c24;
    padding: 10px;
    border-radius: 5px;
    margin-top: 5px;
    font-size: 14px;
}

.info-text {
    color: #6c757d;
    font-size: 12px;
    margin-top: 5px;
}
</style>
{% endblock %}

{% block main %}
<div class="form-container">
    <a href="{% url 'user:center' %}" class="btn-back">
        <i class="fas fa-arrow-left"></i> 返回个人中心
    </a>
    
    <h1 class="form-title">修改个人信息</h1>
    
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        
        <div class="avatar-section">
            <div>
                {% if request.user.header %}
                    <img src="{{ request.user.header.url }}" alt="当前头像" class="current-avatar">
                {% else %}
                    <img src="/media/head/head.png" alt="默认头像" class="current-avatar">
                {% endif %}
            </div>
            <p class="info-text">当前头像</p>
        </div>
        
        <div class="form-group">
            {{ form.username.label_tag }}
            {{ form.username }}
            {% if form.username.errors %}
                {% for error in form.username.errors %}
                    <div class="alert">{{ error }}</div>
                {% endfor %}
            {% endif %}
            <div class="info-text">用户名用于登录和显示</div>
        </div>

        <div class="form-group">
            <label for="{{ form.header.id_for_label }}">头像</label>
            <div class="file-upload-wrapper">
                {{ form.header }}
                <div class="upload-text">
                    <i class="fas fa-cloud-upload-alt"></i><br>
                    点击选择新头像<br>
                    <small>支持 JPG、PNG 格式，不超过 5MB</small>
                </div>
            </div>
            {% if form.header.errors %}
                {% for error in form.header.errors %}
                    <div class="alert">{{ error }}</div>
                {% endfor %}
            {% endif %}
        </div>

        <button type="submit" class="btn-submit">
            <i class="fas fa-save"></i> 保存修改
        </button>
    </form>
</div>
{% endblock %}